<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs>
    <div class="field-box">
      <!-- <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
        <i class="el-icon-link" />
      </a>-->
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab === 'field' && showField" size="mini" label-width="90px">
          <!-- <el-form-item v-if="activeData.changeTag" label="组件类型">
            <el-select v-model="activeData.tagIcon" placeholder="请选择组件类型" :style="{ width: '100%' }"
              @change="tagChange">
              <el-option-group v-for="group in tagList" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.label" :label="item.label" :value="item.tagIcon">
                  <svg-icon class="node-icon" :icon-class="item.tagIcon" />
                  <span> {{ item.label }}</span>
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>-->
          <!-- <el-button size="mini" @click="$emit('fillParamsData')">填充数据</el-button> -->
          <!-- 字段选择 -->
          <el-form-item label="字段选择">
            <el-select
              v-show="activeData.layout != 'tableFormItem' && activeData.layout !='textFormCon'  && activeData.layout !='textFormChange' "
              v-model="activeData.params"
              @change="selectChange"
              :value-key="'paramName'"
            >
              <el-option
                v-for="(item,idx) in paramsData"
                :key="item.paramName+idx +'el-option'"
                :label="item.title"
                :value="item"
              >
                <span>{{ item.title }}</span>
              </el-option>
            </el-select>
            <el-select
              v-show="activeData.layout == 'textFormCon' || activeData.layout =='textFormChange'"
              v-model="activeData.params"
              @change="RowsChange"
              :value-key="'paramName'"
            >
              <el-option
                v-for="(item,idx) in paramsData"
                :key="item.paramName+idx +'el-option'"
                :label="item.title"
                :value="item"
              >
                <span>{{ item.title }}</span>
              </el-option>
            </el-select>
            <template v-for="(tableItem, index) in activeData.tableHeader ">
              <el-select
                :key="index"
                v-if="activeData.layout == 'tableFormItem'"
                v-model="activeData.tableHeader[index]"
                @change="tableSelectChange(tableItem)"
                :value-key="'paramName'"
              >
                <el-option
                  v-for="(item,index) in paramsData"
                  :key="item.paramName+index +'header'"
                  :label="item.title"
                  :value="item"
                >
                  <span>{{ item.title }}</span>
                </el-option>
              </el-select>
            </template>
          </el-form-item>

          <!-- 表头名称 -->
          <el-form-item label="手写字段" v-show="activeData.layout == 'tableFormItem' ">
            <el-input
              v-for="item in activeData.tableHeader"
              :key="item.paramName +'shouxie'"
              v-model="item.title"
              placeholder="请输入字段名"
            />
          </el-form-item>
          <!-- 字段名 paramName -->
          <el-form-item v-if="activeData.vModel !== undefined" label="字段名">
            <el-input v-model="activeData.vModel" placeholder="请输入字段名" disabled />
          </el-form-item>
          <!-- title -->
          <el-form-item v-if="activeData.label !== undefined" label="字段标题">
            <el-input v-model="activeData.label" placeholder="请输入字段标题" />
          </el-form-item>

          <!-- <el-form-item v-if="activeData.componentName !== undefined" label="组件名">
            {{ activeData.componentName }}
          </el-form-item>-->
          <!-- 字段值 -->
          <el-form-item v-if="activeData.defaultValue !== undefined" label="字段值">
            <el-input
              v-if="activeData.tag == 'picture'"
              v-model="activeData.vModel"
              placeholder="请输入字段标题"
              :disabled="activeData.tag == 'picture'"
            />
            <el-input
              v-else
              :value="setDefaultValue(activeData.defaultValue)"
              placeholder="请输入默认值"
              @input="onDefaultValueInput"
              :disabled="activeData.tag == 'qrCode'"
            />

            <!-- <el-input v-model="activeData.defaultValue"></el-input> -->
          </el-form-item>
          <!-- <el-form-item v-if="activeData.placeholder !== undefined" label="占位提示">
            <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
          </el-form-item>-->
          <el-form-item v-if="activeData['start-placeholder'] !== undefined" label="开始占位">
            <el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
          </el-form-item>
          <el-form-item v-if="activeData['end-placeholder'] !== undefined" label="结束占位">
            <el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
          </el-form-item>
          <el-form-item v-if="activeData.rows != undefined" label="变行数">
            <el-input-number
              v-model="activeData.rows"
              @change="selectRowsChange"
              @keydown.native="channelInputLimit"
              :step="1"
              :min="1"
              :max="20"
            ></el-input-number>
            <!-- <el-select v-model="activeData.rowCount" @change="selectRowCountChange">
              <el-option :label="item" :value="item" v-for="item in 6" :key="item">{{ item }}</el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item v-if="activeData.columnsNum != undefined" label="变列数">
            <el-input-number
              v-model="activeData.columnsNum"
              @change="selectColumsChange"
              @keydown.native="channelInputLimit"
              :step="1"
              :min="1"
              :max="20"
            ></el-input-number>
            <!-- <el-select v-model="activeData.rowCount" @change="selectRowCountChange">
              <el-option :label="item" :value="item" v-for="item in 6" :key="item">{{ item }}</el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item v-if="activeData.span !== undefined" label="单元格长度">
            <el-slider
              v-model="activeData.span"
              :max="24"
              :min="1"
              :marks="{ 12: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item v-if="activeData.leftSpan !== undefined" label="左边列长度">
            <el-slider
              v-model="activeData.leftSpan"
              :max="24"
              :min="1"
              :marks="{ 5: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <!-- <el-form-item v-if="activeData.centerSpan !== undefined" label="中间列长度">
            <el-slider
              v-model="activeData.centerSpan"
              :max="24"
              :min="1"
              :marks="{ 5: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item v-if="activeData.rightSpan !== undefined" label="右边列长度">
            <el-slider
              v-model="activeData.rightSpan"
              :max="24"
              :min="1"
              :marks="{ 5: '' }"
              @change="spanChange"
            />
          </el-form-item>-->
          <template
            v-for="(item,index) in activeData.columns"
            v-show="activeData.columns !== undefined"
          >
            <el-form-item :label="'第' + (index+2) +'列长度'" :key="index">
              <el-slider
                v-model="activeData.columns[index].rightSpan"
                :max="24"
                :min="1"
                :marks="{ 5: '' }"
                @change="spanChange"
              />
            </el-form-item>
          </template>
          <el-form-item v-if="activeData.layout === 'rowFormItem'" label="栅格间隔">
            <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
          </el-form-item>
          <el-form-item v-if="activeData.layout === 'rowFormItem'" label="布局模式">
            <el-radio-group v-model="activeData.type">
              <el-radio-button label="default" />
              <el-radio-button label="flex" />
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="activeData.justify !== undefined && activeData.type === 'flex'"
            label="水平排列"
          >
            <el-select
              v-model="activeData.justify"
              placeholder="请选择水平排列"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in justifyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.align !== undefined && activeData.type === 'flex'"
            label="垂直排列"
          >
            <el-radio-group v-model="activeData.align">
              <el-radio-button label="top" />
              <el-radio-button label="middle" />
              <el-radio-button label="bottom" />
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.labelWidth !== undefined" label="标签宽度">
            <el-input v-model.number="activeData.labelWidth" type="number" placeholder="请输入标签宽度" />
          </el-form-item>
          <el-form-item
            v-if="activeData.style && activeData.style.width !== undefined"
            label="组件宽度"
          >
            <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
          </el-form-item>
          <el-form-item v-if="activeData.fontsize !== undefined" label="文字大小">
            <el-slider
              v-model="activeData.fontsize"
              :max="36"
              :min="6"
              :marks="{ 12: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item v-if="activeData.pwidth !== undefined" label="图片宽度">
            <el-slider
              v-model="activeData.pwidth"
              :max="1000"
              :min="10"
              :marks="{ 20: '' }"
              @change="spanChange"
            />
          </el-form-item>

          <el-form-item v-if="activeData.pheight !== undefined" label="图片高度">
            <el-slider
              v-model="activeData.pheight"
              :max="1000"
              :min="20"
              :marks="{ 20: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item v-if="activeData.height !== undefined" label="文本高度">
            <el-slider
              v-model="activeData.height"
              :max="200"
              :min="10"
              :marks="{ 10: '' }"
              @change="spanChange"
            />
          </el-form-item>
          <el-form-item v-if="activeData.labelPosition != undefined" label="水平对齐">
            <el-radio-group v-model="activeData.labelPosition">
              <el-radio-button label="flex-start">左对齐</el-radio-button>
              <el-radio-button label="center">居中对齐</el-radio-button>
              <el-radio-button label="flex-end">右对齐</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.alignVertically != undefined" label="垂直对齐">
            <el-radio-group v-model="activeData.alignVertically">
              <el-radio-button label="flex-start">上对齐</el-radio-button>
              <el-radio-button label="center">居中对齐</el-radio-button>
              <el-radio-button label="flex-end">下对齐</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="只显示名称" v-if="activeData.hiddenValue !== undefined">
            <el-switch v-model="activeData.hiddenValue" />
          </el-form-item>

          <el-form-item v-if="activeData['prefix-icon'] !== undefined" label="前图标">
            <el-input v-model="activeData['prefix-icon']" placeholder="请输入前图标名称">
              <el-button
                slot="append"
                icon="el-icon-thumb"
                @click="openIconsDialog('prefix-icon')"
              >选择</el-button>
            </el-input>
          </el-form-item>

          <el-form-item v-if="activeData['suffix-icon'] !== undefined" label="后图标">
            <el-input v-model="activeData['suffix-icon']" placeholder="请输入后图标名称">
              <el-button
                slot="append"
                icon="el-icon-thumb"
                @click="openIconsDialog('suffix-icon')"
              >选择</el-button>
            </el-input>
          </el-form-item>

          <el-form-item v-if="activeData.tag === 'el-cascader'" label="选项分隔符">
            <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
          </el-form-item>

          <el-form-item v-if="activeData.autosize !== undefined" label="最小行数">
            <el-input-number v-model="activeData.autosize.minRows" :min="1" placeholder="最小行数" />
          </el-form-item>

          <el-form-item v-if="activeData.autosize !== undefined" label="最大行数">
            <el-input-number v-model="activeData.autosize.maxRows" :min="1" placeholder="最大行数" />
          </el-form-item>

          <el-form-item v-if="activeData.min !== undefined" label="最小值">
            <el-input-number v-model="activeData.min" placeholder="最小值" />
          </el-form-item>

          <el-form-item v-if="activeData.max !== undefined" label="最大值">
            <el-input-number v-model="activeData.max" placeholder="最大值" />
          </el-form-item>

          <el-form-item v-if="activeData.tag === 'el-input-number'" label="精度">
            <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
          </el-form-item>

          <el-form-item v-if="activeData.tag === 'el-input-number'" label="按钮位置">
            <el-radio-group v-model="activeData['controls-position']">
              <el-radio-button label>默认</el-radio-button>
              <el-radio-button label="right">右侧</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            v-if="activeData.type !== undefined && 'el-date-picker' === activeData.tag"
            label="时间类型"
          >
            <el-select
              v-model="activeData.type"
              placeholder="请选择时间类型"
              :style="{ width: '100%' }"
              @change="dateTypeChange"
            >
              <el-option
                v-for="(item, index) in dateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="activeData['picker-options'] !== undefined" label="时间段">
            <el-input v-model="activeData['picker-options'].selectableRange" placeholder="请输入时间段" />
          </el-form-item>

          <el-form-item v-if="activeData.format !== undefined" label="时间格式">
            <el-input
              :value="activeData.format"
              placeholder="请输入时间格式"
              @input="setTimeValue($event)"
            />
          </el-form-item>
          <template
            v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.tag) > -1"
          >
            <el-divider>选项</el-divider>
            <draggable
              :list="activeData.options"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <div v-for="(item, index) in activeData.options" :key="index" class="select-item">
                <div class="select-line-icon option-drag">
                  <i class="el-icon-s-operation" />
                </div>
                <el-input v-model="item.label" placeholder="选项名" size="small" />
                <el-input
                  placeholder="选项值"
                  size="small"
                  :value="item.value"
                  @input="setOptionValue(item, $event)"
                />
                <div
                  class="close-btn select-line-icon"
                  @click="activeData.options.splice(index, 1)"
                >
                  <i class="el-icon-remove-outline" />
                </div>
              </div>
            </draggable>
            <div style="margin-left: 20px;">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addSelectItem"
              >添加选项</el-button>
            </div>
            <el-divider />
          </template>

          <template v-if="['el-cascader'].indexOf(activeData.tag) > -1">
            <el-divider>选项</el-divider>
            <el-form-item label="数据类型">
              <el-radio-group v-model="activeData.dataType" size="small">
                <el-radio-button label="dynamic">动态数据</el-radio-button>
                <el-radio-button label="static">静态数据</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <template v-if="activeData.dataType === 'dynamic'">
              <el-form-item label="标签键名">
                <el-input v-model="activeData.labelKey" placeholder="请输入标签键名" />
              </el-form-item>
              <el-form-item label="值键名">
                <el-input v-model="activeData.valueKey" placeholder="请输入值键名" />
              </el-form-item>
              <el-form-item label="子级键名">
                <el-input v-model="activeData.childrenKey" placeholder="请输入子级键名" />
              </el-form-item>
            </template>

            <el-tree
              v-if="activeData.dataType === 'static'"
              draggable
              :data="activeData.options"
              node-key="id"
              :expand-on-click-node="false"
              :render-content="renderContent"
            />
            <div v-if="activeData.dataType === 'static'" style="margin-left: 20px">
              <el-button
                style="padding-bottom: 0"
                icon="el-icon-circle-plus-outline"
                type="text"
                @click="addTreeItem"
              >添加父级</el-button>
            </div>
            <el-divider />
          </template>

          <el-form-item v-if="activeData.optionType !== undefined" label="选项样式">
            <el-radio-group v-model="activeData.optionType">
              <el-radio-button label="default">默认</el-radio-button>
              <el-radio-button label="button">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="activeData.range !== undefined" label="范围选择">
            <el-switch v-model="activeData.range" @change="rangeChange" />
          </el-form-item>
          <el-form-item
            v-if="activeData.border !== undefined && activeData.optionType === 'default'"
            label="是否带边框"
          >
            <el-switch v-model="activeData.border" />
          </el-form-item>
          <el-form-item v-if="activeData.formborder !== undefined" label="是否带边框">
            <el-switch v-model="activeData.formborder" />
          </el-form-item>

          <el-form-item
            v-if="activeData.borderTop !== undefined && !activeData.formborder"
            label="是否带上边框"
          >
            <el-switch v-model="activeData.borderTop" />
          </el-form-item>

          <el-form-item
            v-if="!activeData.formborder && activeData.borderRight !== undefined"
            label="是否带右边框"
          >
            <el-switch v-model="activeData.borderRight" />
          </el-form-item>

          <el-form-item
            v-if="!activeData.formborder && activeData.borderBottom !== undefined"
            label="是否带下边框"
          >
            <el-switch v-model="activeData.borderBottom" />
          </el-form-item>

          <el-form-item
            v-if="!activeData.formborder && activeData.borderLeft !== undefined"
            label="是否带左边框"
          >
            <el-switch v-model="activeData.borderLeft" />
          </el-form-item>

          <el-form-item label="组件靠右">
            <el-switch v-model="activeData.floatCon" />
          </el-form-item>
          <el-form-item label="显示表头" v-if="activeData.showHeader != undefined">
            <el-switch v-model="activeData.showHeader" />
          </el-form-item>

          <el-form-item v-if="activeData.tag === 'el-color-picker'" label="颜色格式">
            <el-select
              v-model="activeData['color-format']"
              placeholder="请选择颜色格式"
              :style="{ width: '100%' }"
              @change="colorFormatChange"
            >
              <el-option
                v-for="(item, index) in colorFormatOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="activeData.size !== undefined &&
        (activeData.optionType === 'button' ||
          activeData.border ||
          activeData.tag === 'el-color-picker')"
            label="选项尺寸"
          >
            <el-radio-group v-model="activeData.size">
              <el-radio-button label="medium">中等</el-radio-button>
              <el-radio-button label="small">较小</el-radio-button>
              <el-radio-button label="mini">迷你</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="activeData.layout == 'tableFormItem' " label="表格列数">
            <el-input-number
              v-model="activeData.colCount"
              :step="1"
              @change="selectColCountChange"
              :min="2"
              :max="20"
              label="描述文字"
            ></el-input-number>
            <!-- <el-select v-model="activeData.colCount" @change="selectColCountChange">
              <el-option :label="item" :value="item" v-for="item in 6" :key="item">{{ item }}</el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item v-if="activeData.layout == 'tableFormItem' " label="表格行数">
            <el-input-number
              v-model="activeData.rowCount"
              :step="1"
              @change="selectRowCountChange"
              :min="1"
              :max="20"
              label="描述文字"
            ></el-input-number>
            <!-- <el-select v-model="activeData.rowCount" @change="selectRowCountChange">
              <el-option :label="item" :value="item" v-for="item in 6" :key="item">{{ item }}</el-option>
            </el-select>-->
          </el-form-item>

          <el-form-item v-if="activeData.align != undefined" label="对齐方式">
            <el-radio-group v-model="activeData.align">
              <el-radio-button label="left">左对齐</el-radio-button>
              <el-radio-button label="center">居中对齐</el-radio-button>
              <el-radio-button label="right">右对齐</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item v-if="activeData.tableWidth !== undefined" label="表格宽度">
            <el-slider
              v-model="activeData.tableWidth"
              :max="100"
              :min="50"
              :marks="{ 100: '' }"
              @change="spanChange"
            />
          </el-form-item>-->

          <!-- <el-form-item v-if="activeData.required !== undefined" label="是否必填">
            <el-switch v-model="activeData.required" />
          </el-form-item>-->

          <template v-if="activeData.layoutTree">
            <el-divider>布局结构树</el-divider>
            <el-tree
              :data="[activeData]"
              :props="layoutTreeProps"
              node-key="renderKey"
              default-expand-all
              draggable
            >
              <span slot-scope="{ node, data }">
                <span class="node-label">
                  <svg-icon class="node-icon" :icon-class="data.tagIcon" />
                  {{ node.label }}
                </span>
              </span>
            </el-tree>
          </template>
        </el-form>

        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'form'" size="small" label-width="90px">
          <el-form-item label="表单名">
            <el-input v-model="formConf.formRef" placeholder="请输入表单名（ref）" />
          </el-form-item>
          <el-form-item label="表单模型">
            <el-input v-model="formConf.formModel" placeholder="请输入数据模型" />
          </el-form-item>
          <el-form-item label="校验模型">
            <el-input v-model="formConf.formRules" placeholder="请输入校验模型" />
          </el-form-item>
          <el-form-item label="表单尺寸">
            <el-radio-group v-model="formConf.size">
              <el-radio-button label="medium">中等</el-radio-button>
              <el-radio-button label="small">较小</el-radio-button>
              <el-radio-button label="mini">迷你</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签对齐">
            <el-radio-group v-model="formConf.labelPosition">
              <el-radio-button label="left">左对齐</el-radio-button>
              <el-radio-button label="right">右对齐</el-radio-button>
              <el-radio-button label="top">顶部对齐</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标签宽度">
            <el-input-number v-model="formConf.labelWidth" placeholder="标签宽度" />
          </el-form-item>
          <el-form-item label="栅格间隔">
            <el-input-number v-model="formConf.gutter" :min="0" placeholder="栅格间隔" />
          </el-form-item>
          <!-- <el-form-item label="禁用表单">
            <el-switch v-model="formConf.disabled" />
          </el-form-item>
          <el-form-item label="表单按钮">
            <el-switch v-model="formConf.formBtns" />
          </el-form-item>
          <el-form-item label="显示未选中组件边框">
            <el-switch v-model="formConf.unFocusedComponentBorder" />
          </el-form-item>-->
        </el-form>
      </el-scrollbar>
    </div>

    <treeNode-dialog :visible.sync="dialogVisible" title="添加选项" @commit="addNode" />
    <icons-dialog
      :visible.sync="iconsVisible"
      :append-to-body="true"
      :current="activeData[currentIconModel]"
      @select="setIcon"
    />
  </div>
</template>

<script>
import { isArray } from "util";
import TreeNodeDialog from "./TreeNodeDialog";
import { isNumberStr, deepClone } from "../../utils/index";
import IconsDialog from "./IconsDialog";
import {
  inputComponents, //输入型组件
  // selectComponents,    // 选择型组件
  layoutComponents //  布局型组件
} from "../../utils/generator/config"; // 组件类型

const dateTimeFormat = {
  date: "yyyy-MM-dd",
  week: "yyyy 第 WW 周",
  month: "yyyy-MM",
  year: "yyyy",
  datetime: "yyyy-MM-dd HH:mm:ss",
  daterange: "yyyy-MM-dd",
  monthrange: "yyyy-MM",
  datetimerange: "yyyy-MM-dd HH:mm:ss"
};

export default {
  components: {
    TreeNodeDialog,
    IconsDialog
  },
  props: ["showField", "activeData", "formConf", "paramsData"],
  data() {
    return {
      currentTab: "field",
      currentNode: null,
      dialogVisible: false,
      iconsVisible: false,
      currentIconModel: null,
      dateTypeOptions: [
        {
          label: "日(date)",
          value: "date"
        },
        {
          label: "周(week)",
          value: "week"
        },
        {
          label: "月(month)",
          value: "month"
        },
        {
          label: "年(year)",
          value: "year"
        },
        {
          label: "日期时间(datetime)",
          value: "datetime"
        }
      ],
      dateRangeTypeOptions: [
        {
          label: "日期范围(daterange)",
          value: "daterange"
        },
        {
          label: "月范围(monthrange)",
          value: "monthrange"
        },
        {
          label: "日期时间范围(datetimerange)",
          value: "datetimerange"
        }
      ],
      colorFormatOptions: [
        {
          label: "hex",
          value: "hex"
        },
        {
          label: "rgb",
          value: "rgb"
        },
        {
          label: "rgba",
          value: "rgba"
        },
        {
          label: "hsv",
          value: "hsv"
        },
        {
          label: "hsl",
          value: "hsl"
        }
      ],
      justifyOptions: [
        {
          label: "start",
          value: "start"
        },
        {
          label: "end",
          value: "end"
        },
        {
          label: "center",
          value: "center"
        },
        {
          label: "space-around",
          value: "space-around"
        },
        {
          label: "space-between",
          value: "space-between"
        }
      ],
      layoutTreeProps: {
        label(data, node) {
          return data.componentName || `${data.label}: ${data.vModel}`;
        }
      }
      // paramsValue: {},
    };
  },

  computed: {
    // 查看组件文档
    // documentLink() {
    //   return (
    //     this.activeData.document
    //     || 'https://element.eleme.cn/#/zh-CN/component/installation'
    //   )
    // },
    dateOptions() {
      if (
        this.activeData.type !== undefined &&
        this.activeData.tag === "el-date-picker"
      ) {
        if (this.activeData["start-placeholder"] === undefined) {
          return this.dateTypeOptions;
        }
        return this.dateRangeTypeOptions;
      }
      return [];
    },
    tagList() {
      return [
        {
          label: "输入型组件",
          options: inputComponents
        }
        // {
        //   label: '选择型组件',
        //   options: selectComponents
        // }
      ];
    }
  },
  watch: {
    formConf: {
      immediate: true,
      deep: true,
      handler(val) {
        this.formConf = val;
        // console.log(val);
      }
    }
  },
  mounted() {
    //console.log(this.paramsData);
  },
  methods: {
    addReg() {
      this.activeData.regList.push({
        pattern: "",
        message: ""
      });
    },
    addSelectItem() {
      this.activeData.options.push({
        label: "",
        value: ""
      });
    },
    addTreeItem() {
      ++this.idGlobal;
      this.dialogVisible = true;
      this.currentNode = this.activeData.options;
    },
    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          <span>{node.label}</span>
          <span class="node-operation">
            <i
              on-click={() => this.append(data)}
              class="el-icon-plus"
              title="添加"
            ></i>
            <i
              on-click={() => this.remove(node, data)}
              class="el-icon-delete"
              title="删除"
            ></i>
          </span>
        </div>
      );
    },
    append(data) {
      if (!data.children) {
        this.$set(data, "children", []);
      }
      this.dialogVisible = true;
      this.currentNode = data.children;
    },
    remove(node, data) {
      const { parent } = node;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    addNode(data) {
      this.currentNode.push(data);
    },
    setOptionValue(item, val) {
      item.value = isNumberStr(val) ? +val : val;
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(",");
      }
      if (["string", "number"].indexOf(val) > -1) {
        return val;
      }
      if (typeof val === "boolean") {
        return `${val}`;
      }
      return val;
    },
    onDefaultValueInput(str) {
      if (isArray(this.activeData.defaultValue)) {
        // 数组
        this.$set(
          this.activeData,
          "defaultValue",
          str.split(",").map(val => (isNumberStr(val) ? +val : val))
        );
      } else if (["true", "false"].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData, "defaultValue", JSON.parse(str));
      } else {
        // 字符串和数字
        this.$set(
          this.activeData,
          "defaultValue",
          isNumberStr(str) ? +str : str
        );
      }
    },
    onSwitchValueInput(val, name) {
      if (["true", "false"].indexOf(val) > -1) {
        this.$set(this.activeData, name, JSON.parse(val));
      } else {
        this.$set(this.activeData, name, isNumberStr(val) ? +val : val);
      }
    },
    setTimeValue(val, type) {
      const valueFormat = type === "week" ? dateTimeFormat.date : val;
      this.$set(this.activeData, "defaultValue", null);
      this.$set(this.activeData, "value-format", valueFormat);
      this.$set(this.activeData, "format", val);
    },
    spanChange(val) {
      this.formConf.span = val;
    },
    fontsizeChange(val) {
      this.activeData.fontsize = val;
    },
    multipleChange(val) {
      this.$set(this.activeData, "defaultValue", val ? [] : "");
    },
    dateTypeChange(val) {
      this.setTimeValue(dateTimeFormat[val], val);
    },
    rangeChange(val) {
      this.$set(
        this.activeData,
        "defaultValue",
        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
      );
    },
    rateTextChange(val) {
      if (val) this.activeData["show-score"] = false;
    },
    rateScoreChange(val) {
      if (val) this.activeData["show-text"] = false;
    },
    colorFormatChange(val) {
      this.activeData.defaultValue = null;
      this.activeData["show-alpha"] = val.indexOf("a") > -1;
      this.activeData.renderKey = +new Date(); // 更新renderKey,重新渲染该组件
    },
    openIconsDialog(model) {
      this.iconsVisible = true;
      this.currentIconModel = model;
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val;
    },
    tagChange(tagIcon) {
      let target = inputComponents.find(item => item.tagIcon === tagIcon);
      if (!target)
        target = selectComponents.find(item => item.tagIcon === tagIcon);
      this.$emit("tag-change", target);
    },
    // 选中字段数据
    selectChange(event) {
      this.activeData.label = JSON.parse(
        JSON.stringify(this.activeData.params.title)
      ); // 字段标题
      this.activeData.vModel = JSON.parse(
        JSON.stringify(this.activeData.params.paramName)
      ); // 字段名
      this.activeData.defaultValue = "{{" + this.activeData.vModel + "}}";
      // this.activeData.defaultValue = JSON.parse(JSON.stringify(this.activeData.params.paramsName));   // 字段名
    },
    RowsChange(event) {
      this.activeData.label = JSON.parse(
        JSON.stringify(this.activeData.params.title)
      ); // 字段标题
      this.activeData.vModel = JSON.parse(
        JSON.stringify(this.activeData.params.paramName)
      ); // 字段名
      this.activeData.defaultValue = "[[" + this.activeData.vModel + "]]";
      console.log(this.activeData.defaultValue);

      //this.activeData.defaultValue = [this.activeData.vModel];
    },

    // 选中的【表格列数】
    selectColCountChange() {
      //let arr = [];
      if (this.activeData.tableHeader.length < this.activeData.colCount) {
        for (
          var i = this.activeData.tableHeader.length;
          i < this.activeData.colCount;
          i++
        ) {
          this.activeData.tableHeader.push({
            title: "字段" + (i + 1),
            paramName: "param" + (i + 1)
          });
          // 同时对每一行的数据就行添加字段
          // this.$set(this.activeData.tableData[0], 'param' + (i + 1), "")
          this.activeData.tableData.forEach(ele => {
            this.$set(ele, "param" + (i + 1), "");
          });
        }
      } else if (
        this.activeData.tableHeader.length > this.activeData.colCount
      ) {
        for (
          var i = this.activeData.tableHeader.length;
          i > this.activeData.colCount;
          i--
        ) {
          let obj = this.activeData.tableHeader.pop();
          console.log(obj);
          // 同时删除每一行的数据的行添加字段
          // delete this.activeData.tableData[0][obj.paramName];
          this.activeData.tableData.forEach(ele => {
            delete ele[obj.paramName]; /// 删除对象的元素
          });
        }
      }
    },
    // 控制【表格行数】
    selectRowCountChange() {
      let tableTr = {};
      this.activeData.tableHeader.forEach(item => {
        this.$set(tableTr, item.paramName, "");
      });
      // 增加行数
      if (this.activeData.tableData.length < this.activeData.rowCount) {
        for (
          var i = this.activeData.tableData.length;
          i < this.activeData.rowCount;
          i++
        ) {
          this.activeData.tableData.push(tableTr);
        }
      }
      // 删减行数
      else if (this.activeData.tableData.length > this.activeData.rowCount) {
        for (
          var i = this.activeData.tableData.length;
          i > this.activeData.rowCount;
          i--
        ) {
          this.activeData.tableData.pop();
        }
      }
    },
    // 控制【变行文本行数】
    selectRowsChange() {
      if (this.activeData.columns != undefined) {
        let tableTr = "";
        let i = 0;
        this.activeData.columns.forEach(it => {
          if (it.tableData.length > i) {
            i = it.tableData.length;
          }
        });
        // 增加行数
        if (i == this.activeData.rows - 1) {
          this.activeData.columns.forEach(item => {
            item.tableData.push("");
          });
          //this.activeData.columns.push("");
        } else if (i - 1 == this.activeData.rows) {
          this.activeData.columns.forEach(item => {
            item.tableData.pop();
          });
          //this.activeData.tableData.pop();
        }
      } else {
        // 增加行数
        // if (i == this.activeData.rows - 1) {
        //   this.activeData.rows++;
        // } else if (i - 1 == this.activeData.rows) {
        //   this.activeData.rows--;
        // }
      }
    },

    // 增加列数
    selectColumsChange() {
      //let i = 0;
      let i = this.activeData.columns.length;
      let a = 0;
      this.activeData.columns.forEach(it => {
        if (it.tableData.length > a) {
          a = it.tableData.length;
        }
      });

      if (i == this.activeData.columnsNum - 1) {
        let arr = [];
        for (let index = 0; index < a; index++) {
          arr.push("");
        }
        this.activeData.columns.push({
          rightSpan: 3,
          tableData: arr
        });
      } else if (i - 1 == this.activeData.columnsNum) {
        this.activeData.columns.pop();
      }
    },

    channelInputLimit(e) {
      e.returnValue = "";
    },

    tableSelectChange(tableItem) {
      console.log(tableItem);
    }
  }
};
</script>

<style lang="scss" scoped>
.right-board {
  width: 100%;
  height: 100%;
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  // .center-tabs{

  // }

  .field-box {
    position: relative;
    height: calc(100vh - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .el-scrollbar {
    height: 100%;
  }
}

.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.option-drag {
  cursor: move;
}

.time-range {
  .el-date-editor {
    width: 227px;
  }

  ::v-deep .el-icon-time {
    display: none;
  }
}

.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}

.node-label {
  font-size: 14px;
}

.node-icon {
  color: #bebfc3;
}
</style>
<style>
.is-disabled .el-input__inner {
  color: #000 !important;
}
</style>
